@extends('admin.layout.app')
@section('title', '项目列表')

@section('nav')
    @include('admin.layout.nav', ['title'=> ['项目综合管理','项目列表']])
@endsection

@section('content')
    <div id="app">
        <div class="box box-primary" style="min-height: 300px;">
            <div class="box-header with-border">
                <h3 class="box-title">项目列表</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">

                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="项目名称">
                        <el-input v-model="formInline.name" placeholder="项目名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>

                    <el-table
                            :data="tableData"
                            border
                            v-loading="loading"
                            style="width: 100%">
                        <el-table-column
                                type="index"
                                label="序号"
                                width="70"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="项目名称"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="reason"
                                label="申请理由"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="user_name"
                                label="项目申请人"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                prop="first_party"
                                label="项目甲方"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                prop="money"
                                label="项目金额"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                label="审核状态"
                                width="100">
                                <template slot-scope="scope">
                                    <el-tag :type="scope.row.status==0?'info':(scope.row.status==1?'success':'red')">@{{scope.row.status==0?'待审核':(scope.row.status==1?'已通过':'未通过')}}</el-tag>
                                </template>
                        </el-table-column>
                        <el-table-column
                                prop="check_time"
                                label="审核时间"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                label="执行状态"
                                width="100">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.execute_status==0?'info':(scope.row.execute_status==1?'primary':'success')">@{{scope.row.execute_status==0?'待开工':(scope.row.execute_status==1?'执行中':'已完成')}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="execute_time"
                                label="完成时间"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                label="验收状态"
                                width="100">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.accept_status==0?'info':(scope.row.accept_status==1?'primary':'success')">@{{scope.row.accept_status==0?'待验收':(scope.row.accept_status==1?'已验收':'未通过')}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="accept_time"
                                label="验收时间"
                                width="180">
                        </el-table-column>
                    </el-table>
            </div>
            <!-- /.box-body -->
            <div class="box-footer clearfix">
                <div class="block pull-right">
                    <el-pagination
                            layout="prev, pager, next"
                            :total="total"
                            :page-size="10"
                            :current-page="currentPage"
                            @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('style')
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>

    </style>
@endsection

@section('js')
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: function() {
                return {
                    visible: false,
                    tableData: [],
                    loading: false,
                    currentPage: 1,
                    total: 0,
                    formInline: {
                        name: '',
                    }
                }
            },
            created: function() {
                this.fetchData(1, 10, 0);
            },
            methods: {
                fetchData: function(page, perpage, flag) {
                    var self = this;

                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': "{{ csrf_token() }}"
                        }
                    });

                    var queryData = {
                        type: 'ajax',
                        page: page
                    };
                    if(self.formInline.name){
                        queryData.name = self.formInline.name;
                    }

                    self.loading = true;
                    $.get('/project/general/list', queryData, function (res) {
                        self.loading = false;
                        if(res.code == 200){
                            self.tableData = res.data.data;
                            if(flag == 0) {//初始化操作
                                self.total = res.data.total;
                            }
                        }else{

                        }
                    });
                },
                handleCurrentChange: function(currentPage) {
                    this.fetchData(currentPage, 10, 1);
                },
                onSubmit: function(){
                    this.fetchData(1, 10, 0);
                }
            }
        })
    </script>
@endsection